/*
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-25 19:42:19
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-05-26 10:14:49
 * @FilePath: \nien-vue3-admin\src\views\index\components\chartConfig.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { ref } from 'vue'

interface itemStyle {
	color: string;
}
type Warehouse = {
	name: string;
	value?: number | string;
	children?: {
		name: string;
		value: number;
		itemStyle?: itemStyle;
	}[];
	itemStyle?: itemStyle;
	label?: {
		fontWeight: string;
		color: string;
	};
};

const colors = [
  {
    name: '华中事业部',
    color: '#5749ff',
    children: [
      { name: '长沙仓', color: '#4984ff' },
      { name: '武汉仓', color: '#4abaff' },
      { name: '郑州仓', color: '#45f0ff' },
    ],
  },
  {
    name: '华东事业部',
    color: '#44e6d1',
    children: [
      { name: '义乌仓', color: '#42eaad' },
      { name: '上海仓', color: '#42e856' },
      { name: '太仓中转中心', color: '#cee83d' },
      { name: '嘉兴仓', color: '#a0e53d' },
      { name: '华东销售部', color: '#ede73b' },
    ],
  },
  {
    name: '华南事业部',
    color: '#f550b9',
    children: [
      { name: '泉州仓', color: '#f3569b' },
      { name: '厦门仓', color: '#f55555' },
      { name: '广州仓', color: '#f17b55' },
      { name: '宁波仓', color: '#fcac53' },
      { name: '深圳仓', color: '#f4c750' },
      { name: '龙华仓', color: '#feda52' },
    ],
  },
  {
    name: '华北事业部',
    color: '#834ef6',
    children: [
      { name: '某某仓', color: '#a84ff9' },
      { name: '某北仓', color: '#c64df0' },
    ],
  },
]
//实重
export const receivingTotalWeightList = ref<Warehouse[]>([
  {
    name: '华南',
    children: [],
  },
  {
    name: '华东',
    children: [],
  },
  {
    name: '华北',
    children: [],
  },
  {
    name: '华中',
    children: [],
  },
])
// 材积重
export const receivingTotalWoodList = ref<Warehouse[]>([
  {
    name: '华南',
    children: [],
  },
  {
    name: '华东',
    children: [],
  },
  {
    name: '华北',
    children: [],
  },
  {
    name: '华中',
    children: [],
  },
])

export const initOption = (name, data) => {
  //校验是否全是 0
  
  const isAllZero = !data.some(i => {
     if (i.children && i.children.some(t => !!t.value)) {
       return true
     }
     return false
  })
  
  if (isAllZero) {
    data = [{
       name: '无数据',
       color: '#91cc75',
       value: 100
    }]
  } else {
    data.forEach((el) => {
      el.label = {
        fontWeight: 'bold',
        color: 'white',
      }
      colors.forEach((colorEl) => {
        if (colorEl.name.includes(el.name) && !el.itemStyle) {
          el.itemStyle = { color: colorEl.color }
        }
        el.children
          && el.children.forEach((child) => {
            colorEl.children.forEach((colorChild) => {
              if (child.name == colorChild.name) {
                child.itemStyle = { color: colorChild.color }
              }
            })
          })
      })
    })
  }
  return {
    graphic: {
      type: 'text',
      left: 'center',
      top: 'center',
      style: { text: name, textAlign: 'center', fill: '#000', fontSize: 14 },
    },
    tooltip: {
      show: !isAllZero,
      trigger: 'item',
      formatter(params) {
        const { seriesName, data, name, value, marker } = params
        let res = `<span style="display:inline-block;font-size:1.2em;margin-bottom:8px;color:#040b15;">${ seriesName }</span><br/>
          ${ marker }
          <span style="display:inline-block;font-size:1.1em;margin-bottom:5px;color:#040b15;">${ name }：${ value }</span>
          <br/>`
        data.children
            && data.children.forEach((el) => {
              const itemColor = el.itemStyle && el.itemStyle.color
              const circle = `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${ itemColor };"></span>`
              res += `&nbsp;&nbsp;${ circle }${ el.name }：<span style="color:#040b15;">${ el.value }</span><br/>`
            })
        return res
      },
    },
    series: [{
      name,
      type: 'sunburst',
      sort: undefined,
      radius: [50, '90%'],
      label: {
        rotate: 0,
      },
      data,
      levels: [
        {
          r0: 0,
          r1: 60,
          label: {
            show: false,
          },
        },
      ],
      emphasis: {
        focus: 'descendant',
      },
    }],
  }
}


